<template>
  <div :class="styles.resume">
    <!-- <div :class="styles.top">
      <CheckResult />
    </div> -->

    <ShowCard title="展示头像" margin>
      <ImagePreview :data="resume.avatar ? [resume.avatar] : []" :count="1" />
      <template v-slot:right>
        <AButton name="编辑" @click="clickAvataEdit"></AButton>
      </template>
    </ShowCard>

    <UserInfo :data="resume" />

    <ShowCard title="个人简介及技能特长" margin>
      <template v-slot:right>
        <AButton name="编辑" @click="clickPersonal"></AButton>
      </template>
      <div>{{ resume.speciality || '暂无' }}</div>
    </ShowCard>

    <Works :data="workList" :resumeId="resume.id" />

    <ShowCard title="个人工作生活照" margin>
      <ImagePreview :data="everydayPicList" :count="9" />
      <template v-slot:right>
        <AButton name="编辑" @click="clickEverydayEdit"></AButton>
      </template>
    </ShowCard>
    <ShowCard title="技能资格证照片" margin>
      <ImagePreview
        :data="certificationPicList"
        @change="(v) => (certificationPicList = v)"
        :count="9"
      />
      <template v-slot:right>
        <AButton name="编辑" @click="certificationPicEdit"></AButton>
      </template>
    </ShowCard>
    <ShowCard title="健康证及体检报告照片" margin>
      <ImagePreview :data="healthPicList" :count="9" />
      <template v-slot:right>
        <AButton name="编辑" @click="healthPicEdit"></AButton>
      </template>
    </ShowCard>
  </div>
</template>
<script lang="ts">
import { reactive, ref } from 'vue';
import { ShowCard, AButton, ImagePreview } from '@/components';
import { getWorks } from '@/service/resume.service';
import { useResumeStore } from '@/stores';
import { IResume, Resume, Work } from '@/types';
import { UserInfo, Works } from './components';
import Taro from '@tarojs/taro';
import { useLoginInterCeptor } from '@/hooks/login';
import styles from './index.module.less';

export default {
  components: {
    Works,
    ShowCard,
    ImagePreview,
    AButton,
    // CheckResult,
    UserInfo,
  },
  setup() {
    const loadingSubmitButton = ref(false);
    const resumeStore = useResumeStore();
    const resume = reactive<IResume>(new Resume());
    const workList = ref<Work[]>([]);
    const healthPicList = ref<String[]>([]);
    const everydayPicList = ref<String[]>([]);
    const certificationPicList = ref<String[]>([]);

    const init = async () => {
      try {
        await resumeStore.getResume();
        Object.assign(resume, resumeStore.data);
        if (resume.id) {
          workList.value = await getWorks({ resumeId: resume.id });
        }
        if (resume.healthPic) {
          healthPicList.value = resume.healthPic.split(',');
        }
        if (resume.everydayPic) {
          everydayPicList.value = resume.everydayPic.split(',');
        }
        if (resume.certificationPic) {
          certificationPicList.value = resume.certificationPic.split(',');
        }
      } catch (error) {
        // 登录已失效，展示登录页面
      }
    };

    useLoginInterCeptor(init);

    /**
     * 个人简介编辑
     */
    const clickPersonal = () => {
      resumeStore.reload = true;
      Taro.navigateTo({
        url: `/subpackages/pofile/index?id=${resume.id}`,
      });
    };

    /**
     * 头像编辑
     */
    const clickAvataEdit = () => {
      resumeStore.reload = true;
      Taro.navigateTo({
        url: `/subpackages/userEdit/index`,
      });
    };

    /**
     * 生活工作照编辑
     */
    const clickEverydayEdit = () => {
      resumeStore.reload = true;
      Taro.navigateTo({
        url: `/pages/resumeEdit/index?id=${resume.id}&title=生活工作照片&field=everydayPic&count=9`,
      });
    };

    /**
     * 技能资格照编辑
     */
    const certificationPicEdit = () => {
      resumeStore.reload = true;
      Taro.navigateTo({
        url: `/pages/resumeEdit/index?id=${resume.id}&title=技能资格照片&field=certificationPic&count=9`,
      });
    };

    /**
     * 健康证和体检报告编辑
     */
    const healthPicEdit = () => {
      resumeStore.reload = true;
      Taro.navigateTo({
        url: `/pages/resumeEdit/index?id=${resume.id}&title=健康证和体检报告&field=healthPic&count=9`,
      });
    };

    return {
      styles,
      resume,
      workList,
      healthPicEdit,
      clickPersonal,
      clickAvataEdit,
      clickEverydayEdit,
      certificationPicEdit,
      healthPicList,
      everydayPicList,
      certificationPicList,
      loadingSubmitButton,
    };
  },
};
</script>
